<template>
  <div class="confirmOrder">
    <headerI title="确认订单" />
    <div class="address">
      <div class="address-box">
        <div class="user">
          <span class="user-name">{{ this.user.username }}</span>
          <span class="user-number">{{ this.user.usernumber }}</span>
        </div>
        <div class="add">
          <span class="userremark">{{ this.user.userremark }}</span>
          <span class="useradd">{{ this.user.useradd }}</span>
        </div>
        <img
          @click="jump"
          src="../../assets/img/confirm-order/confirm order_icon_forward@2x.png"
          class="icon"
          alt=""
        />
      </div>
    </div>
    <div class="shop">
      <div class="shop-box">
        <div class="shop-message">
          <img :src="getImgUrl(this.shop.shopimg)" class="shopimg" alt="" />
          <div class="shop-text">
            <span class="shopname">{{ this.shop.shopname }}</span>
            <div class="shop-color">
              <span>{{ this.shop.shopcolor }}</span>
              <span>x1</span>
            </div>
            <span class="price">￥{{ this.shop.price }}</span>
          </div>
        </div>
        <div class="buy">
          <span class="buy-text">购买数量</span>
          <div class="buy-box">
            <span @click="minus()">-</span>
            <span>{{ this.shop.count }}</span>
            <span @click="add()">+</span>
          </div>
        </div>
        <div class="ship">
          <span class="freight">运费</span>
          <span class="free">包邮</span>
        </div>
      </div>
    </div>
    <div class="discounts">
      <div class="discounts-box">
        <div class="certificate">
          <span class="certificate-tit">优惠券</span>
          <span class="sale">满2000减100</span>
        </div>
        <span class="separator"></span>
        <div class="coupon">
          <span class="coupon-tit">代金券</span>
          <span class="cash">无</span>
        </div>
      </div>
    </div>
    <div class="payment">
      <div class="payment-box">
        <span class="payment-tit">合计:</span>
        <span class="payment-price">￥{{ allprice() }}</span>
        <span class="payment-discount">(已优惠￥100)</span>
        <span class="payment-icon">确认支付</span>
      </div>
    </div>
  </div>
</template>

<script>
import headerI from "../../components/indent-header.vue";

export default {
  name: "defaultHtml",
  components: {
    headerI,
  },
  data() {
    return {
      user: {
        username: "林设计",
        usernumber: "15119517127",
        userremark: "公司",
        useradd: "广东省深圳市南山区深圳办公大楼239号",
      },
      shop: {
        shopimg: "img/confirm-order/photo@2x.png",
        shopname: "承唐宋之风原创三合一熏香炉",
        shopcolor: "蓝绿色",
        count: "1",
        price: "2300",
        discount: "100",
      },
    };
  },
  methods: {
    getImgUrl(icon) {
      return require("@/assets/" + icon);
    },
    minus() {
      if (this.shop.count <= 1) {
        this.shop.count = 1;
      } else {
        this.shop.count--;
      }
    },
    add() {
      this.shop.count++;
    },
    allprice() {
      return this.shop.count * this.shop.price - this.shop.discount;
    },
    jump(){
      this.$router.push('/addressManage');
    },
  },
};
</script>

<style lang="less" scoped>
.confirmOrder {
  background: #f5f5f5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .address {
    width: 3.43rem;
    height: 0.78rem;
    background: #ffffff;
    margin: 0.12rem auto 0;
    position: relative;
    .address-box {
      padding: 0.12rem 0 0.13rem;
      margin: 0 0.3rem 0 0.12rem;
      .user {
        display: flex;
        align-items: center;
        .user-name {
          display: block;
          font-size: 0.16rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        .user-number {
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          color: #666666;
          margin-left: 0.09rem;
        }
      }
      .add {
        display: flex;
        align-items: center;
        margin-top: 0.13rem;
        .userremark {
          display: block;
          width: 0.36rem;
          padding: 0.005rem 0 0.01rem;
          background: #1b7373;
          border-radius: 8px;
          font-size: 0.1rem;
          font-family: PingFang SC;
          color: #ffffff;
          text-align: center;
        }
        .useradd {
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          color: #666666;
          margin-left: 0.08rem;
        }
      }
    }
    .icon {
      width: 0.16rem;
      height: 0.16rem;
      position: absolute;
      right: 0.08rem;
      bottom: 0.27rem;
    }
  }
  .shop {
    width: 3.43rem;
    height: 2.1rem;
    background: #ffffff;
    margin: 0.12rem auto 0;
    .shop-box {
      padding: 0.12rem 0;
      margin: 0 0.12rem;
      .shop-message {
        display: flex;
        .shopimg {
          width: 1.08rem;
          height: 1.08rem;
          display: block;
        }
        .shop-text {
          margin-left: 0.08rem;
          .shopname {
            display: block;
            font-size: 0.16rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .shop-color {
            margin-top: 0.04rem;
            display: flex;
            justify-content: space-between;
            span {
              display: block;
              font-size: 0.12rem;
              font-family: PingFang SC;
              color: #999999;
            }
          }
          .price {
            display: block;
            font-size: 0.16rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #e42121;
            margin-top: 0.13rem;
          }
        }
      }
      .buy {
        display: flex;
        margin-top: 0.2rem;
        justify-content: space-between;
        .buy-text {
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #666666;
        }
        .buy-box {
          display: flex;
          span {
            text-align: center;
            width: 0.2rem;
            height: 0.2rem;
            background: #f0f0f0;
            border-radius: 50%;
            font-size: 0.14rem;
            font-family: PingFang SC;
            color: #e42121;
            display: block;
            margin-left: 0.15rem;
          }
        }
      }
      .ship {
        display: flex;
        justify-content: space-between;
        margin-top: 0.2rem;
        .freight {
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #666666;
        }
        .free {
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          color: #666666;
        }
      }
    }
  }
  .discounts {
    width: 3.43rem;
    height: 1.04rem;
    background: #ffffff;
    margin: 0.12rem auto 0;
    .discounts-box {
      padding: 0.16rem 0;
      margin: 0 0.12rem;
      .certificate {
        display: flex;
        justify-content: space-between;
        .certificate-tit {
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #666666;
        }
        .sale {
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          color: #e42121;
        }
      }
      .separator {
        display: block;
        width: 3.19rem;
        height: 0px;
        border: 0.01rem solid #f0f0f0;
        margin-top: 0.17rem;
      }
      .coupon {
        margin-top: 0.16rem;
        display: flex;
        justify-content: space-between;
        .coupon-tit {
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #666666;
        }
        .cash {
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          color: #999999;
        }
      }
    }
  }
  .payment {
    width: 3.43rem;
    height: 0.68rem;
    background: #ffffff;
    margin: 0.12rem auto 0;

    .payment-box {
      padding: 0.12rem 0;
      margin: 0 0.12rem 0 0.16rem;
      display: flex;
      align-items: center;
      .payment-tit {
        display: block;
        font-size: 0.16rem;
        font-family: PingFang SC;
        color: #333333;
      }
      .payment-price {
        .payment-tit();
        color: #e42121;
      }
      .payment-discount {
        display: block;
        font-size: 0.14rem;
        font-family: PingFang SC;
        color: #999999;
      }
      .payment-icon {
        width: 1.06rem;
        text-align: center;
        padding: 0.11rem 0 0.12rem 0;
        background: #1b7373;
        display: block;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        margin-left: 0.25rem;
      }
    }
  }
}
</style>